<template>
	<div class="search-content">
		<div>
			<div class="header-bar">
				<div class="header-bar-fixed">
					<i class="downapp">下载App</i>
					<van-icon class="searchIcon" name="search" size="25px"/>
				</div>
			</div>
			<div class="container page-main hasPlayBar">
				<div class="search-bar">
					<form>
						<van-icon class="searchIcondown" name="search"  size="25px"/>
						<div class="input-box">
							<input placeholder="歌名、歌手、专辑" type="search">
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="player-bar">
			<div class="player">
				<div class="info">
					<span class="title">暂无歌曲播放</span>
				</div>
				<div class="control">
					<span class="play"></span>
					<span class="next"></span>
				</div>
			</div>
		</div>
	</div>
	
</template>

<script>
</script>

<style scoped>
	.search-content{
		background-color: #fff;
	}
	.header-bar {
	    height: 1.8rem;
	    position: relative;
	}
	.header-bar .header-bar-fixed {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 20.74vw;
	    border-bottom: .5px solid #e0e0e0;
	    background: url(../assets/img/searchLogo.png) #f52222 50% no-repeat;
	    background-size: cover;
	}
	.header-bar .downapp {
	    position: fixed;
	    font-size: 13px;
	    height: 8vw;
	    line-height: 8vw;
	    z-index: 102;
	    top: 7vw;
	    right: 19vw;
	    display: block;
	    font-style: normal;
	    padding: 0 10px;
	    border-radius: 2px;
	    color: #fafafa;
	    opacity: .9;
	    background-color: #e61723;
	}
	.search-bar {
	    margin: 25px 30px 30px;
	    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
	    padding: 0 15px;
	}
	.search-bar form {
	    display: flex;
	    align-items: center;
	}
	.search-bar form .iconfont {
	    font-size: 18px;
	    margin-right: 15px;
	    color: rgba(0,0,0,.2);
	}
	.search-bar form .input-box input {
	    width: 100%;
	    height: 40px;
	    border: 0;
	}
	.header-bar-fixed .searchIcon {
		
		position: fixed;
		top: 30px;
		right: 20px;

	}
	.search-bar .searchIcondown {
		color: rgba(0,0,0,.2);
	}
	.player-bar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 9998;
		background-color: #fff;
		box-sizing: border-box;
	}
	.player-bar .player {
		line-height: 19px;
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		color: #333;
		padding: 0 30px;
		height: 49px;
		z-index: 2;
	}
	.player-bar .player .info {
		font-size: 11px;
		color: #000;
		display: inline-block;
	}
	.player-bar .player .control .play {
		background: url(../assets/img/playIcon.png) no-repeat;
		background-size: 100% 100%;
	}
	.player-bar .player .control span {
		width: 27px;
		height: 27px;
		display: inline-block;
		vertical-align: middle;
		margin-left: 20px;
			
	}
	.player-bar .player .control .next {
		background: url(../assets/img/nextSong.png) no-repeat;
		background-size: 100% 100%;
	}
</style>
